<template>
  <view class="rating-item">
    <div class="user-cover">
      <image :src="props.rating.avatar" mode="heightFix"></image>
    </div>
    <div class="rating-detail">
      <div class="designer-name">
        {{ props.rating.nickname }}
        <div v-if="props.rating.sku" class="good-type">{{ props.rating.sku }}</div>
      </div>
      <div class="truncate rating-t">{{ props.rating.comment }}</div>
    </div>
    <div v-if="props.rating.pics?.length" class="good-image">
      <image :src="props.rating.pics[0]" mode="heightFix"></image>
    </div>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  rating: {
    type: Object,
    default: () => {},
  },
});
</script>

<style scoped lang="scss">
.rating-item {
  display: flex;
  .user-cover {
    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }
  }
  .rating-detail {
    width: 0;
    flex: 1;
    padding: 0 20rpx;
    .designer-name {
      display: flex;
      align-items: center;
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 38rpx;
      .good-type {
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 32rpx;
        padding: 0 15rpx;
      }
    }
    .rating-t {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 34rpx;
      padding: 8rpx 0 0;
    }
  }
  .good-image {
    image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
  }
}
</style>
